<template>
    <view class="banner mt-28 br-24 over-hide align-center space-between pr-30 pl-30">
        <swiper
            class="swiper big flex-auto"
            :autoplay="true"
            :duration="600"
            :interval="5000"
            :circular="true"
            :vertical="true"
        >
            <swiper-item v-for="item in list" :key="item.id">
                <view class="big align-center space-between ft-26 t-3">
                    <view class="tab center line-height1 pl-10 pr-10 pt-6 pb-6 mr-10 br-6 t-w">
                        {{ type[item.noticeType] || '活动' }}
                    </view>
                    <view class="flex-auto text-over-1">
                        {{ item.noticeContent || '暂无活动' }}
                    </view>
                    <view class="dot mr-8"></view>
                </view>
            </swiper-item>
        </swiper>
        <view class="mask big"></view>
    </view>
</template>

<script setup>
/**
 * @description 首页活动
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'Activity'
})
defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
const type = {
    1: '优惠',
    2: '活动'
}
</script>

<style scoped lang="scss">
.banner {
    width: 100%;
    position: relative;
    height: 72rpx;
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .tab {
        background: $uni-color-primary;
    }
    .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: $uni-color-error;
    }
    .rightIcon {
        transform: translateX(6rpx);
    }
}
</style>
